export default {
  template: `
    <div>
        <h1>dashboard 页面</h1>
        <el-row class="tac">
        <el-col :span="12">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo">
            <el-menu-item 
            v-if="v.children.length==0"
            :index="v.cat_id+''" :key="v.cat_id" v-for="(v,i) in menus">
            <i class="el-icon-location"></i>
              {{v.cat_name}}
            </el-menu-item>
            <el-submenu 
            v-if="item.children.length!=0"
            :index="item.cat_id+''" :key="item.cat_id" v-for="(item,index) in menus">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.cat_name}}</span>
              </template>
                <el-menu-item :index="v.cat_id+''" :key="item.cat_id" v-for="(v,i) in item.children">
                    {{v.cat_name}}
                </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
        <el-col :span="12">
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="ID"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="Name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="Population"
          label="人口">
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
        </el-col>
      </el-row>
    </div>
    `,
  mounted() {
    // 获取菜单
    axios
      .get("/menu/getmenu")
      .then((res) => {
        // console.log(res.data);
        // 获取菜单的数据
        let menus = this.getMenuData(res.data.data);
        this.menus = menus;
      })
      .catch((err) => console.log(err));
    // 获取城市的分页的数据
    axios
      .get("/city", {
        params: {
          start: this.start,
          pageSize: this.pageSize,
        },
      })
      .then((res) => {
        console.log(res.data.data);
        let data = res.data;
        this.total = data.total; // 4079
        this.tableData = data.data;
      })
      .catch((err) => console.log(err));
  },
  data: function () {
    return {
      start: 0,
      total: 0, // 总数
      pageSize: 20,
      tableData: [],
      menus: [],
      /* 
            [
                {
                    name:"首页",
                    cat_id:1,
                    children:[
                        {
                            name:"用户管理",
                            cat_id:2,
                            children:[]
                        }
                    ]
                }
            ]
        
        */
    };
  },
  methods: {
    // 页码发生变化
    handleCurrentChange: function (val) {
      // val 当前的页面 pageSize 20
      // console.log(val);
      // 获取城市的分页的数据
      axios
        .get("/city", {
          params: {
            start: (val-1)*this.pageSize,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          let data = res.data;
          this.total = data.total; // 4079
          this.tableData = data.data;
        })
        .catch((err) => console.log(err));
    },
    getMenuData(menus) {
      let first_menus = menus.filter((v) => {
        return v.cat_pid === 0; // 顶层菜单
      });
      //   console.log(first_menus);
      // 循环顶层菜单
      first_menus.map((v) => {
        // v=>children
        v.children = []; // 子级菜单
        menus.map((value) => {
          if (value.cat_pid === v.cat_id) {
            v.children.push(value);
          }
        });
      });
      //   console.log(first_menus);
      return first_menus;
    },
  },
};
